<template>
  <q-dialog v-model="filterActivity">
    <FilterForm
      :section="log_type"
      :action="action_type"
      :sub_section="category_type"
      :stock_code="stock_code"
      :serial_no="serial_no"
      :job_order="job_order"
      :date-from="dateFrom"
      :date-to="dateTo"
      @filter="filterLog"
    ></FilterForm>
  </q-dialog>
  <div class="q-pa-md my-card">
    <div class="q-gutter-y-md">
      <div class="row justify-between">
        <div class="page-header">Activity</div>
        <q-card-actions>
          <q-btn
            icon="search"
            class="default-btn"
            label="search"
            @click="filterActivity = true"
          >
          </q-btn>
          <q-btn label="clear" class="cap blue-btn" flat @click="clear"></q-btn>
        </q-card-actions>
      </div>
      <div class="row">
        <div class="col-6">
          <div class="cap" v-for="(item, index) in query" :key="index">
            {{ item }}
          </div>
        </div>

        <div class="col-6">
          <q-pagination
            class="justify-end"
            v-model="currentPage"
            color="primary"
            :max="max"
            :max-pages="6"
            boundary-numbers
          />
          <div class="text-right q-pa-sm" style="font-size: 1rem">
            <i>Total Records found: {{ total }} </i> 
          </div>
        </div>
      </div>

      <q-separator />
      <ScrollArea :bot-margin="30">
        <div v-if="noData">
          {{ 'No data found...' }}
        </div>
        <div v-for="(item, index) in filterRow" :key="index">
          <LogCard :item="item"></LogCard>
        </div>
        <!--  <q-page-sticky position="bottom-right" :offset="[50, 60]">
        <q-btn fab icon="arrow_upward" color="accent" @click="goToTop" />
      </q-page-sticky> -->
      </ScrollArea>
    </div>
  </div>
</template>

<script setup lang="ts">
import FilterForm from 'src/components/reportTable/FilterForm.vue';
import { filter_log } from 'src/services/activityLogService';
import { EventLogInterface } from 'src/services/type';
import { formatDate, formatDateTimeString } from 'src/utils/dateUtils';
import { computed, ref, watch } from 'vue';
import { FilterForm as FilterFormI } from 'src/services/type';
import { useQuasar } from 'quasar';
import ScrollArea from 'src/components/ScrollArea.vue';
import LogCard from 'src/components/log/LogCard.vue';

const $q = useQuasar();

const filterActivity = ref(false);

const log_type = ref('');
const action_type = ref('');
const category_type = ref('');
const stock_code = ref('');
const serial_no = ref('');
const job_order = ref('');

const currentPage = ref(1);
const max = ref(10);
const total = ref(0);
const currentDate = new Date();
// get 7 day ago
const day7ago = new Date(currentDate.getTime() - 7 * 24 * 60 * 60 * 1000);
const dateFrom = ref(formatDate(day7ago) + ' 00:00:00');
const dateTo = ref(formatDate(currentDate) + ' 23:59:59');

const query = ref<string[]>([]);

const rows = ref<EventLogInterface[]>();
const noData = ref(false);

function filterLog(form: { data: FilterFormI }) {
  log_type.value = form.data.section;
  action_type.value = form.data.action;
  category_type.value = form.data.sub_section;
  stock_code.value = form.data.stock_code;
  serial_no.value = form.data.serial_no;
  job_order.value = form.data.job_order;
  dateFrom.value = form.data.dateFrom;
  dateTo.value = form.data.dateTo;

  initQ();
  for (const key in form.data) {
    console.log(key);

    if (key == 'dateFrom' || key == 'dateTo') continue;
    if (form.data[key] != '') {
      query.value.push(`${key.replace('_', ' ')} : ${form.data[key]}`);
    }
  }
  init();
  filterActivity.value = false;
}

function initQ() {
  query.value = [`From ${dateFrom.value} to ${dateTo.value}`];
}

function clear() {
  log_type.value = '';
  action_type.value = '';
  category_type.value = '';
  stock_code.value = '';
  serial_no.value = '';
  job_order.value = '';
  dateFrom.value = formatDate(day7ago) + ' 00:00:00';
  dateTo.value = formatDate(currentDate) + ' 23:59:59';
  init();
  initQ();
}

const filterRow = computed(() => {
  return rows.value;
});
async function init() {
  //showLoading();
  const res = await filter_log(
    log_type.value,
    action_type.value,
    category_type.value,
    stock_code.value,
    serial_no.value,
    job_order.value,
    dateFrom.value,
    dateTo.value,
    currentPage.value
  );
  console.log(res);
  if (res.length == 0) {
    noData.value = true;
  }
  total.value = res.count;
  rows.value = res.results;
  max.value = Math.ceil(res.count / 100);
  // q.loading.hide();
}

init();
initQ();

watch(currentPage, () => {
  init();
});

function showLoading() {
  $q.loading.show({
    message: 'Doing something. Please wait...',
    boxClass: 'bg-grey-2 text-grey-9',
    spinnerColor: 'primary',
  });
}

function goToTop() {
  window.scrollTo(0, 0);
}
</script>

<style scoped>
.item {
  margin: 0.5rem;
  font-weight: 500;
}
</style>
